<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>条形码生成</title>
</head>

<body >

<div class="page" id="app">
    <el-upload
            class="upload-demo"
            drag
            action=""
            multiple
            :http-request="uploadHttpRequest"
    >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将二维码图片拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <span>解析结果:</span>
    <br>
    <span >{{content}}</span>
    <br>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.0-alpha.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let vue = new Vue({
        el:"#app",
        data:{
            content: '',

        },
        methods:{
            uploadHttpRequest(param) {
                let formData = new FormData(); //FormData对象，添加参数只能通过append('key', value)的形式添加
                formData.append("file", param.file); //添加文件对象
                axios.post('/zing/bar',formData,{
                    headers: {
                        "Content-Type": "multipart/form-data",//配置header，我们上传的文件编码格式就是multipart/form-data
                    },
                }).then((res)=>{
                    console.log(res.data)
                    if (res.data.success) {
                        this.content = res.data.data.text
                    } else {
                        this.content = "解析失败 " + res.data.errorMsg
                    }
                })
            },
        }
    });

</script>

</body>
<style>
    .page{
        text-align: center;
    }

</style>
</html>